<template>
  <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
        <van-card
            v-for="item in goodsList" 
            :key="item.id"
            :tag="item.tag"
            :price="item.retail_price"
            :origin-price="item.origin_price" 
            :desc="item.goods_brief"
            :title="item.name"
            :thumb="item.list_pic_url" >
        </van-card>
    </div>
  </div>  
</template>

<script setup>
const goodsList = [{
    retail_price: '98.00', 
    name: '皇冠秋冬季加厚双层拉舍尔毛毯',
    goods_brief: '双人毯子保暖、轻盈、透气、柔软', 
    list_pic_url: '/images/top1.jpg',
    tag: 'TOP1'
},
{
    retail_price: '88.00',
    origin_price: '98.00',
    name: '儿童摇摇马',
    goods_brief: '安全、不会侧翻、爸妈放心', 
    list_pic_url: '/images/top2.jpg',
    tag: 'TOP2'
},
{
    retail_price: '128.00',
    origin_price: '168.00',
    name: '可躺可睡休闲懒人沙发',
    goods_brief: '轻松看书、社交、办公、舒适放松',
    list_pic_url: '/images/top3.jpg',
    tag: 'TOP3'
},
{
    retail_price: '48.8.00',
    origin_price: '58.9.00', 
    name: '儿童积木 拼装玩具',
    goods_brief: '大颗粒 家长更放心 不易吞咽、安全性高',
    list_pic_url: '/images/top4.jpg', 
    tag: 'TOP4'
},
{
    retail_price: '99.00',
    origin_price: '199.00',
    name: '成人青少年上班族出行代步大轮滑板车',
    goods_brief: '一键折叠、超强承重、无拘无束、自由穿梭',
    list_pic_url: '/images/top5.jpg',
    tag: 'TOP5' 
}
]
</script>

<style lang="less" scoped>
.home-top {
    h3 {
        font-size: 22px;
        line-height: 30px; 
        text-align: center;
        margin: 0.5rem 0;
    }
    .content {
        --van-tag-primary-color: #FF8000; 
        --van-card-font-size: 16px;
        --van-card-background: #f9f9f9;
        background: var(--van-card-background);
        :deep(.van-card) {
            margin-top: 0;
            .van-card   title {
                padding: 10px 0 5px;}
                .van-card   price-currency  {
                    font-size: var(--van-card-font-size); 
                }  
        }
        &::after {
            content: '';
            display: block;
            height: 3rem;
        }
    }  
}
</style>